
<template>
  <div class="three-canvas" ref="threeTarget"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { TEngine } from "./assets/ts/TEngine";

//TBasicObject输出一个数组，在这里引用
import { objectList } from "./assets/ts/TBasicObject";
//引用贴图
import { TCanvasTexture } from "./assets/ts/TCanwasTextrue";

export default defineComponent({
  setup() {
    const threeTarget = ref(null);

    onMounted(() => {
      const TH = new TEngine(threeTarget.value!);
      //添加TBasicObject中输出的box
      TH.addObject(...objectList);
      //声明变量传递，准备画画
      const textCanvas = new TCanvasTexture();
      //在画布上画画
      textCanvas
        .draw((ctx) => {
          //画个矩形
          ctx.beginPath();
          //画的大小
          ctx.rect(10, 10, 200, 200);
          //画的颜色
          ctx.strokeStyle = "red";

          ctx.stroke();
          //填充什么颜色
          ctx.fillStyle = "blue";
          //填充
          ctx.fill();

          //关闭路径
          ctx.closePath();
        })
        .preview();
    });

    return {
      threeTarget,
    };
  },
});
</script>


<style>
.three-canvas {
  width: 100%;
  height: 100%;
}

#app {
  width: 100%;
  height: 100%;
}
</style>
